<template>
  <div class="col-sm-12">
    <!--form begin-->
    <div class="form-horizontal">
      <div class="site-bgcolor">
        <hr/>
        <div class="form-group">
          <label for="memberid" class="col-sm-2 control-label">id</label>
          <div class="col-sm-4">
            <input class="form-control" id="memberid" name="memberid" placeholder="id" readonly v-model="item.id">
          </div>
        </div>
        <div class="form-group">
          <label for="name" class="col-sm-2 control-label">name</label>
          <div class="col-sm-4">
            <input class="form-control" id="name" name="name" placeholder="name" v-model="item.name">
          </div>
        </div>
        <div class="form-group">
          <label for="birth" class="col-sm-2 control-label">birth</label>
          <div class="col-sm-4">
            <input class="form-control" id="birth" name="birth" placeholder="birth" v-model="item.birth">
          </div>
        </div>
        <div class="form-group">
          <label for="sex" class="col-sm-2 control-label">sex</label>
          <div class="col-sm-4">
            <select id="sex" v-model="item.sex">
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="tel" class="col-sm-2 control-label">tel</label>
          <div class="col-sm-4">
            <input class="form-control" id="tel" name="tel" placeholder="tel" v-model="item.tel">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">email</label>
          <div class="col-sm-4">
            <input class="form-control" id="email" name="email" placeholder="email" v-model="item.email"/>
          </div>
        </div>
        <div class="form-group">
          <label for="address" class="col-sm-2 control-label">address</label>
          <div class="col-sm-4">
            <input class="form-control" id="address" name="address" placeholder="address" v-model="item.address"/>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-3 col-md-push-9">
            <button class="btn btn-default" v-on:click="onCancelClick(item,$event)">取消</button>
            <button class="btn btn-default" v-on:click="onSubmitClick(item,$event)">保存</button>
          </div>
        </div>
        <hr/>
      </div>
    </div>
    <!-- </form> -->
  </div>
</template>
<style>
  .site-bgcolor {
    background: AliceBlue
  }
</style>
<script>
  // import { find } from './actions'
  export default {
    name: 'Edit',
    data: function () {
      return {}
    },
    props: ['item', 'mode', 'url'],
    components: {},
    methods: {
      onCancelClick: function () {
        this.$dispatch('finditem')
        this.$dispatch('component', 'modeList')
      },
      onSubmitClick: function (item) {
        if (this.mode === 'modeAddNew') {
          this.$http.post(this.url, item).then(function (response) {
            window.alert('提交成功 ')
            this.$dispatch('finditem')
            this.item = {}
            this.$dispatch('component', 'modeList')
          }, function (response) {
            window.alert('failed to save,Probably failed to connect the backend server! Pls check your server status! ')
          })
        } else {
          this.$http.put(this.url, item).then(function (response) {
            window.alert('修改成功 ')
            this.$dispatch('component', 'modeList')
          }, function (response) {
            this.$dispatch('finditem')
            window.alert('failed to update,Probably failed to connect the backend server! Pls check your server status! ')
          })
        }
      }
    }
  }
</script>
